

<!DOCTYPE html>
<html lang="zh-CN" data-default-color-scheme=&#34;auto&#34;>



<head>
  <meta charset="UTF-8">
  <link rel="apple-touch-icon" sizes="76x76" href="/img/favicon.png">
  <link rel="icon" type="image/png" href="/img/favicon.png">
  <meta name="viewport"
        content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, shrink-to-fit=no">
  <meta http-equiv="x-ua-compatible" content="ie=edge">
  
  <meta name="theme-color" content="#2f4154">
  <meta name="description" content="CodeHope">
  <meta name="author" content="CodeHope">
  <meta name="keywords" content="希望">
  <title>Javascript中的`this,call,apply,bind` - CodeHope</title>

  <link  rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css" />


  <link  rel="stylesheet" href="https://cdn.jsdelivr.net/npm/github-markdown-css@4.0.0/github-markdown.min.css" />
  <link  rel="stylesheet" href="/lib/hint/hint.min.css" />

  
    
    
      
      
        
          
          
          
        
        <link  rel="stylesheet" href="https://cdn.jsdelivr.net/npm/prismjs@1.22.0/themes/prism-tomorrow.min.css" />
      
      
        <link  rel="stylesheet" href="https://cdn.jsdelivr.net/npm/prismjs@1.22.0/plugins/line-numbers/prism-line-numbers.min.css" />
      
    
  

  
    <link  rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fancyapps/fancybox@3.5.7/dist/jquery.fancybox.min.css" />
  



<!-- 主题依赖的图标库，不要自行修改 -->

<link rel="stylesheet" href="//at.alicdn.com/t/font_1749284_ba1fz6golrf.css">



<link rel="stylesheet" href="//at.alicdn.com/t/font_1736178_kmeydafke9r.css">


<link  rel="stylesheet" href="/css/main.css" />

<!-- 自定义样式保持在最底部 -->


  <script id="fluid-configs">
    var Fluid = window.Fluid || {};
    var CONFIG = {"hostname":"quancundexiwang.wang","root":"/","version":"1.8.7","typing":{"enable":true,"typeSpeed":70,"cursorChar":"_","loop":false},"anchorjs":{"enable":true,"element":"h1,h2,h3,h4,h5,h6","placement":"left","visible":"hover","icon":""},"progressbar":{"enable":true,"height_px":3,"color":"#29d","options":{"showSpinner":true,"trickleSpeed":100}},"copy_btn":true,"image_zoom":{"enable":true},"toc":{"enable":true,"headingSelector":"h1,h2,h3,h4,h5,h6","collapseDepth":0},"lazyload":{"enable":true,"onlypost":true},"web_analytics":{"enable":false,"baidu":null,"google":null,"gtag":null,"tencent":{"sid":null,"cid":null},"woyaola":null,"cnzz":null,"leancloud":{"app_id":"Mi65hxq7VAFUDwOLeIGAOgiV-gzGzoHsz","app_key":"hMuhiD4FRqhns4giqLiEH9HG","server_url":null}}};
  </script>
  <script  src="/js/utils.js" ></script>
  <script  src="/js/color-schema.js" ></script>
<meta name="generator" content="Hexo 5.3.0"></head>


<body>
  <header style="height: 80vh;">
    <nav id="navbar" class="navbar fixed-top  navbar-expand-lg navbar-dark scrolling-navbar">
  <div class="container">
    <a class="navbar-brand"
       href="/">&nbsp;<strong>CodeHope</strong>&nbsp;</a>

    <button id="navbar-toggler-btn" class="navbar-toggler" type="button" data-toggle="collapse"
            data-target="#navbarSupportedContent"
            aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
      <div class="animated-icon"><span></span><span></span><span></span></div>
    </button>

    <!-- Collapsible content -->
    <div class="collapse navbar-collapse" id="navbarSupportedContent">
      <ul class="navbar-nav ml-auto text-center">
        
          
          
          
          
            <li class="nav-item">
              <a class="nav-link" href="/">
                <i class="iconfont icon-home-fill"></i>
                村头
              </a>
            </li>
          
        
          
          
          
          
            <li class="nav-item">
              <a class="nav-link" href="/archives/">
                <i class="iconfont icon-archive-fill"></i>
                归档
              </a>
            </li>
          
        
          
          
          
          
            <li class="nav-item">
              <a class="nav-link" href="/categories/">
                <i class="iconfont icon-category-fill"></i>
                分类
              </a>
            </li>
          
        
          
          
          
          
            <li class="nav-item">
              <a class="nav-link" href="/tags/">
                <i class="iconfont icon-tags-fill"></i>
                标签
              </a>
            </li>
          
        
          
          
          
          
            <li class="nav-item">
              <a class="nav-link" href="/about/">
                <i class="iconfont icon-user-fill"></i>
                我
              </a>
            </li>
          
        
        
          <li class="nav-item" id="search-btn">
            <a class="nav-link" data-toggle="modal" data-target="#modalSearch">&nbsp;<i
                class="iconfont icon-search"></i>&nbsp;</a>
          </li>
        
        
          <li class="nav-item" id="color-toggle-btn">
            <a class="nav-link" href="javascript:">&nbsp;<i
                class="iconfont icon-dark" id="color-toggle-icon"></i>&nbsp;</a>
          </li>
        
      </ul>
    </div>
  </div>
</nav>

    <div class="banner" id="banner" parallax=true
         style="background: url('http://qiniuyun.quancundexiwang.wang/20210324173649') repeat center center;
           background-size: cover;">
      <div class="full-bg-img">
        <div class="mask flex-center" style="background-color: rgba(0, 0, 0, 0.3)">
          <div class="page-header text-center fade-in-up">
            <span class="h2" id="subtitle" title="Javascript中的`this,call,apply,bind`">
              
            </span>

            
              <div class="mt-3">
  
  
    <span class="post-meta">
      <i class="iconfont icon-date-fill" aria-hidden="true"></i>
      <time datetime="2021-03-25 16:53" pubdate>
        2021年3月25日 下午
      </time>
    </span>
  
</div>

<div class="mt-1">
  
    
    <span class="post-meta mr-2">
      <i class="iconfont icon-chart"></i>
      2.6k 字
    </span>
  

  
    
    <span class="post-meta mr-2">
      <i class="iconfont icon-clock-fill"></i>
      
      
      35
       分钟
    </span>
  

  
  
</div>

            
          </div>

          
            <div class="scroll-down-bar">
              <i class="iconfont icon-arrowdown"></i>
            </div>
          
        </div>
      </div>
    </div>
  </header>

  <main>
    
      

<div class="container-fluid nopadding-x">
  <div class="row nomargin-x">
    <div class="d-none d-lg-block col-lg-2"></div>
    <div class="col-lg-8 nopadding-x-md">
      <div class="container nopadding-x-md" id="board-ctn">
        <div class="py-5" id="board">
          <article class="post-content mx-auto">
            <!-- SEO header -->
            <h1 style="display: none">Javascript中的`this,call,apply,bind`</h1>
            
            <div class="markdown-body">
              <h1 id="Javascript中的this-call-apply-bind"><a href="#Javascript中的this-call-apply-bind" class="headerlink" title="Javascript中的this,call,apply,bind"></a>Javascript中的<code>this,call,apply,bind</code></h1><p>（以下的示例代码全都在浏览器环境下运行）</p>
<h2 id="this的指向"><a href="#this的指向" class="headerlink" title="this的指向"></a><code>this</code>的指向</h2> <p style='color:#eaf1f8;background:#443da6;padding:10px;font-weight:bolder;border-radius:15px;line-height:30px;'>【在es5规范的用法中！可以大声的说！谁最终调用我，我最终就归谁！】（记住这个最终！）</p>

<div class="code-wrapper"><pre class="line-numbers language-js" data-language="js"><code class="language-js"><span class="token keyword">function</span> <span class="token function">codeMethod</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">&#123;</span>
  console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">&#125;</span>

<span class="token keyword">const</span> obj <span class="token operator">=</span> <span class="token punctuation">&#123;</span>
  name<span class="token operator">:</span><span class="token string">'codeHope'</span><span class="token punctuation">,</span>
  age<span class="token operator">:</span><span class="token number">23</span><span class="token punctuation">,</span>
  codeMethod<span class="token punctuation">,</span>
<span class="token punctuation">&#125;</span>

<span class="token function">codeMethod</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
obj<span class="token punctuation">.</span><span class="token function">codeMethod</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></span></code></pre></div>
<p><img src="http://qiniuyun.quancundexiwang.wang/20210324174714.png" srcset="/img/loading.gif" alt="image-20210324174712930"></p>
<p style='color:#035766;background:#feb856;padding:10px;font-weight:bolder;border-radius:15px;line-height:30px;'>codeMethod();是在全局的环境下调用的(浏览器下window)，而第二个obj.codeMethod();是obj对象调用的，谁调用这个函数，那么里面的那个this就指向那个对象</p>

<img src="http://qiniuyun.quancundexiwang.wang/20210324175303.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg" srcset="/img/loading.gif" style="zoom:50%;" />

<p>下面我们对上面那些变形一下，看看有没有什么坑！</p>
<p><span style='border-radius:50%;width:30px;height:30px;background-color:#FF6C00;color:#2A3950;display:inline-block;text-align:center;font-weight:bolder;line-height:30px;'>1</span> 第一个</p>
<div class="code-wrapper"><pre class="line-numbers language-js" data-language="js"><code class="language-js">window<span class="token punctuation">.</span>obj <span class="token operator">=</span> obj<span class="token punctuation">;</span>
window<span class="token punctuation">.</span>obj<span class="token punctuation">.</span><span class="token function">codeMethod</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span><span class="token comment">//&#123;name: "codeHope", age: 23, codeMethod: ƒ&#125;</span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span></span></code></pre></div>
<p>其实还是指向<code>Obj</code>因为还是<code>obj</code>，最终调用的这个方法！</p>
<p><span style='border-radius:50%;width:30px;height:30px;background-color:#E1D20F;color:#0867EF;display:inline-block;text-align:center;font-weight:bolder;line-height:30px;'>2</span> 第二个</p>
<div class="code-wrapper"><pre class="line-numbers language-js" data-language="js"><code class="language-js"><span class="token keyword">function</span> <span class="token function">codeMethod</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">&#123;</span>
  console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">&#125;</span>

<span class="token keyword">const</span> obj <span class="token operator">=</span> <span class="token punctuation">&#123;</span>
  name<span class="token operator">:</span><span class="token string">'codeHope'</span><span class="token punctuation">,</span>
  age<span class="token operator">:</span><span class="token number">23</span><span class="token punctuation">,</span>
  codeMethod<span class="token punctuation">,</span>
<span class="token punctuation">&#125;</span>

<span class="token keyword">const</span> f <span class="token operator">=</span> obj<span class="token punctuation">.</span>codeMethod<span class="token punctuation">;</span>
<span class="token function">f</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">//Window</span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></span></code></pre></div>
<p>不管你如何变化，因为<code>codeMethod</code>函数对象，是引用类型，你所有的变量（<code> obj.codeMethod</code>，<code>f</code>）存储的都只是他的内存地址，永远指向全局中定义的那个<code>codeMethod</code>,所以你这样子最终还是在全局中调用的这个方法！那么<code>this</code>指向的就是<code>window</code>.</p>
<p> <span style='border-radius:50%;width:30px;height:30px;background-color:#65E8BE;color:#E67881;display:inline-block;text-align:center;font-weight:bolder;line-height:30px;'>3</span> 第三个</p>
<div class="code-wrapper"><pre class="line-numbers language-javascript" data-language="javascript"><code class="language-javascript"><span class="token keyword">function</span> <span class="token function">method</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">&#123;</span>
  console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token function">innerMethod</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token keyword">function</span> <span class="token function">innerMethod</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">&#123;</span>
    console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token punctuation">&#125;</span>
<span class="token punctuation">&#125;</span>
<span class="token keyword">const</span> obj <span class="token operator">=</span> <span class="token punctuation">&#123;</span>
  name<span class="token operator">:</span><span class="token string">"codeHopeObj"</span><span class="token punctuation">,</span>
  myMethod<span class="token operator">:</span>method<span class="token punctuation">,</span>
<span class="token punctuation">&#125;</span>

<span class="token function">method</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
obj<span class="token punctuation">.</span><span class="token function">myMethod</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></span></code></pre></div>
<blockquote>
<p><code>method();</code> 在浏览器环境下是<code>window</code>对象调用，所以第一个里面的this 打印的是<code>window</code>，<code>innerMethod</code>,在内部这个方法没有被任何对象调用，所以他找不到<code>this</code>,默认指向<code>window</code></p>
</blockquote>
<blockquote>
<p><code>obj.myMethod();</code>  <code>obj.myMethod</code>指向的全局的<code>method</code>方法,等于是<code>Obj</code>调用<code>method</code>,所以第一个<code>this</code>打印的是 <code>obj</code>对象,第二个和上面同理,<code>innerMethod</code>,在内部这个方法没有被任何对象调用，所以他找不到<code>this</code>,默认指向<code>window</code></p>
</blockquote>
<p>所以打印结果如下：</p>
<p><img src="http://qiniuyun.quancundexiwang.wang/20210325110234.png" srcset="/img/loading.gif" alt="image-20210325110225594"></p>
<img src="http://qiniuyun.quancundexiwang.wang/20210325110935.jpg?" srcset="/img/loading.gif" alt="img" style="zoom:50%;" />

<p>填一填，我们拍拍土巩固一下啦！</p>
<div class="code-wrapper"><pre class="line-numbers language-js" data-language="js"><code class="language-js"><span class="token keyword">var</span> name <span class="token operator">=</span> <span class="token string">'Nicolas'</span><span class="token punctuation">;</span>
<span class="token keyword">function</span> <span class="token function">Person</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">&#123;</span>
    <span class="token keyword">this</span><span class="token punctuation">.</span>name <span class="token operator">=</span> <span class="token string">'Smiley'</span><span class="token punctuation">;</span>
    <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function-variable function">sayName</span><span class="token operator">=</span><span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">&#123;</span>
        console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">)</span><span class="token punctuation">;</span> 
        console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">.</span>name<span class="token punctuation">)</span><span class="token punctuation">;</span> 
    <span class="token punctuation">&#125;</span><span class="token punctuation">;</span>
    <span class="token function">setTimeout</span><span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">.</span>sayName<span class="token punctuation">,</span> <span class="token number">0</span><span class="token punctuation">)</span><span class="token punctuation">;</span>   
<span class="token punctuation">&#125;</span>

<span class="token keyword">var</span> person <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">Person</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
person<span class="token punctuation">.</span><span class="token function">sayName</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></span></code></pre></div>
<details style="padding:15px 10px;background:#2e339c;color:#f8fafc;transition:all .3s ease;border-radius:12px;">
  <summary style="border:none;out-line:none">点击查看答案</summary>
  <p>Person {name: "Smiley", sayName: ƒ}</p>
  <p>Smiley</p>
  <p>Window {window: Window, self: Window, document: document, name: "Nic..}</p>
  <p>Nicolas</p>
  <p style="background:#ee906b;color:#1b1b2a;padding:10px;border-radius:12px;">
    person.sayName();这个调用的打印结果，很好解释，因为是person这个对象调用的，所以this指向的是person对象，this.name也是Smiley,setTimeout(this.sayName, 0);这个虽然是在构造函数里面，但是他的调用者其实是window，因为你也找不到其他的调用了是不是，其实他写全了是window.setTimeout(this.sayName, 0);所以this指向window对象，指向name是Nicolas
  </p> 
</details>

<h2 id="怎么改变-this-的指向"><a href="#怎么改变-this-的指向" class="headerlink" title="怎么改变 this 的指向"></a>怎么改变 <code>this</code> 的指向</h2><blockquote>
<p>比如下面这个对象中的一个方法，我们需要在一段时间后调用对象中的另一个方法</p>
</blockquote>
<div class="code-wrapper"><pre class="line-numbers language-js" data-language="js"><code class="language-js"><span class="token keyword">var</span> name <span class="token operator">=</span> <span class="token string">"windowsName"</span><span class="token punctuation">;</span>

<span class="token keyword">var</span> a <span class="token operator">=</span> <span class="token punctuation">&#123;</span>
    name <span class="token operator">:</span> <span class="token string">"Cherry"</span><span class="token punctuation">,</span>

    <span class="token function-variable function">func1</span><span class="token operator">:</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">&#123;</span>
        console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">.</span>name<span class="token punctuation">)</span>     
    <span class="token punctuation">&#125;</span><span class="token punctuation">,</span>

    <span class="token function-variable function">func2</span><span class="token operator">:</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">&#123;</span>
        <span class="token function">setTimeout</span><span class="token punctuation">(</span>  <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">&#123;</span>
            <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">func1</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
        <span class="token punctuation">&#125;</span><span class="token punctuation">,</span><span class="token number">100</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token punctuation">&#125;</span>

<span class="token punctuation">&#125;</span><span class="token punctuation">;</span>

a<span class="token punctuation">.</span><span class="token function">func2</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></span></code></pre></div>
<p>当<code>func2</code>被执行的时候,其实里面的<code>setTimeout</code>定时器最终是window对象调用的，而全局中没有<code>func1</code>这个函数所以直接报错了</p>
<p style='color:#ff8080;background:#313131;padding:10px;font-weight:bolder;border-radius:15px;line-height:30px;'> Uncaught TypeError: this.func1 is not a function
    at index.js:12</p>

<p>如果需要完成我们的需求的话，就需要我们去改变<code>this</code>指向,让这个<code>this</code>,指向我们对象的内部！</p>
<p><span style='border-radius:50%;width:30px;height:30px;background-color:#FF6C00;color:#2A3950;display:inline-block;text-align:center;font-weight:bolder;line-height:30px;'>1</span>  <strong>使用箭头函数</strong></p>
<blockquote>
<p>箭头函数的 this 始终指向函数定义时的 this，而非执行时。箭头函数中没有 this 绑定，必须通过查找作用域链来决定其值，如果箭头函数被非箭头函数包含，则 this 绑定的是最近一层非箭头函数的 this，否则，this 为 undefined”</p>
</blockquote>
<div class="code-wrapper"><pre class="line-numbers language-js" data-language="js"><code class="language-js"><span class="token keyword">var</span> name <span class="token operator">=</span> <span class="token string">"windowsName"</span><span class="token punctuation">;</span>

<span class="token keyword">var</span> a <span class="token operator">=</span> <span class="token punctuation">&#123;</span>
    name <span class="token operator">:</span> <span class="token string">"Cherry"</span><span class="token punctuation">,</span>

    <span class="token function-variable function">func1</span><span class="token operator">:</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">&#123;</span>
        console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">.</span>name<span class="token punctuation">)</span>     
    <span class="token punctuation">&#125;</span><span class="token punctuation">,</span>

    <span class="token function-variable function">func2</span><span class="token operator">:</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">&#123;</span>
        <span class="token function">setTimeout</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token operator">=></span> <span class="token punctuation">&#123;</span>
          <span class="token comment">//这个函数，因为是在箭头函数中调用，本身内部不存在this,他就向上在func2中找this,</span>
          <span class="token comment">//func2是被a对象调用的，所以func2中的this,指向a对象，然后调用a对象的func1的方法，就可以顺利执行了</span>
            <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">func1</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span> 
        <span class="token punctuation">&#125;</span><span class="token punctuation">,</span><span class="token number">100</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token punctuation">&#125;</span>

<span class="token punctuation">&#125;</span><span class="token punctuation">;</span>

a<span class="token punctuation">.</span><span class="token function">func2</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span><span class="token comment">// Cherry</span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></span></code></pre></div>
<p> <span style='border-radius:50%;width:30px;height:30px;background-color:#C30F2A;color:#F7FBF8;display:inline-block;text-align:center;font-weight:bolder;line-height:30px;'>2</span>  <strong>在函数内部使用 <code>_this = this</code></strong></p>
<div class="code-wrapper"><pre class="line-numbers language-js" data-language="js"><code class="language-js"><span class="token keyword">var</span> name <span class="token operator">=</span> <span class="token string">"windowsName"</span><span class="token punctuation">;</span>

<span class="token keyword">var</span> a <span class="token operator">=</span> <span class="token punctuation">&#123;</span>
  name<span class="token operator">:</span> <span class="token string">"Cherry"</span><span class="token punctuation">,</span>

  <span class="token function-variable function">func1</span><span class="token operator">:</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">&#123;</span>
    console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">.</span>name<span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token punctuation">&#125;</span><span class="token punctuation">,</span>

  <span class="token function-variable function">func2</span><span class="token operator">:</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">&#123;</span>
    <span class="token comment">//将func2中的this对象指向的a对象地址存入一个变量，然后再其他能访问的这个变量的地方都可以调用里面的方法！</span>
    <span class="token keyword">const</span> _this <span class="token operator">=</span> <span class="token keyword">this</span><span class="token punctuation">;</span> 
    <span class="token function">setTimeout</span><span class="token punctuation">(</span><span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">&#123;</span>
      _this<span class="token punctuation">.</span><span class="token function">func1</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token punctuation">&#125;</span><span class="token punctuation">,</span> <span class="token number">100</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token punctuation">&#125;</span><span class="token punctuation">,</span>
<span class="token punctuation">&#125;</span><span class="token punctuation">;</span>

a<span class="token punctuation">.</span><span class="token function">func2</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span><span class="token comment">// Cherry</span>
<span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></span></code></pre></div>
<p><span style='border-radius:50%;width:30px;height:30px;background-color:#E1D20F;color:#0867EF;display:inline-block;text-align:center;font-weight:bolder;line-height:30px;'>3</span>  <strong>使用 <code>apply、call、bind</code></strong></p>
<ul>
<li><p>使用 <code>apply</code></p>
<div class="code-wrapper"><pre class="line-numbers language-js" data-language="js"><code class="language-js"><span class="token keyword">var</span> name <span class="token operator">=</span> <span class="token string">"windowsName"</span><span class="token punctuation">;</span>

<span class="token keyword">var</span> a <span class="token operator">=</span> <span class="token punctuation">&#123;</span>
  name<span class="token operator">:</span> <span class="token string">"Cherry"</span><span class="token punctuation">,</span>

  <span class="token function-variable function">func1</span><span class="token operator">:</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">&#123;</span>
    console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">.</span>name<span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token punctuation">&#125;</span><span class="token punctuation">,</span>

  <span class="token function-variable function">func2</span><span class="token operator">:</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">&#123;</span>
    <span class="token function">setTimeout</span><span class="token punctuation">(</span><span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">&#123;</span>
      <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">func1</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token punctuation">&#125;</span><span class="token punctuation">.</span><span class="token function">apply</span><span class="token punctuation">(</span>a<span class="token punctuation">)</span><span class="token punctuation">,</span> <span class="token number">100</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token punctuation">&#125;</span><span class="token punctuation">,</span>
<span class="token punctuation">&#125;</span><span class="token punctuation">;</span>

a<span class="token punctuation">.</span><span class="token function">func2</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span><span class="token comment">//Cherry</span>
<span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></span></code></pre></div>


</li>
</ul>
<ul>
<li><p>使用<code> call</code></p>
<div class="code-wrapper"><pre class="line-numbers language-js" data-language="js"><code class="language-js"><span class="token keyword">var</span> name <span class="token operator">=</span> <span class="token string">"windowsName"</span><span class="token punctuation">;</span>

<span class="token keyword">var</span> a <span class="token operator">=</span> <span class="token punctuation">&#123;</span>
  name<span class="token operator">:</span> <span class="token string">"Cherry"</span><span class="token punctuation">,</span>

  <span class="token function-variable function">func1</span><span class="token operator">:</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">&#123;</span>
    console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">.</span>name<span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token punctuation">&#125;</span><span class="token punctuation">,</span>

  <span class="token function-variable function">func2</span><span class="token operator">:</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">&#123;</span>
    <span class="token function">setTimeout</span><span class="token punctuation">(</span><span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">&#123;</span>
      <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">func1</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token punctuation">&#125;</span><span class="token punctuation">.</span><span class="token function">call</span><span class="token punctuation">(</span>a<span class="token punctuation">)</span><span class="token punctuation">,</span> <span class="token number">100</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token punctuation">&#125;</span><span class="token punctuation">,</span>
<span class="token punctuation">&#125;</span><span class="token punctuation">;</span>

a<span class="token punctuation">.</span><span class="token function">func2</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span><span class="token comment">//Cherry</span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></span></code></pre></div>


</li>
</ul>
<ul>
<li><p>使用 <code>bind</code></p>
<div class="code-wrapper"><pre class="line-numbers language-js" data-language="js"><code class="language-js"><span class="token keyword">var</span> name <span class="token operator">=</span> <span class="token string">"windowsName"</span><span class="token punctuation">;</span>

<span class="token keyword">var</span> a <span class="token operator">=</span> <span class="token punctuation">&#123;</span>
  name<span class="token operator">:</span> <span class="token string">"Cherry"</span><span class="token punctuation">,</span>

  <span class="token function-variable function">func1</span><span class="token operator">:</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">&#123;</span>
    console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">.</span>name<span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token punctuation">&#125;</span><span class="token punctuation">,</span>

  <span class="token function-variable function">func2</span><span class="token operator">:</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">&#123;</span>
    <span class="token function">setTimeout</span><span class="token punctuation">(</span><span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">&#123;</span>
      <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">func1</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token punctuation">&#125;</span><span class="token punctuation">.</span><span class="token function">bind</span><span class="token punctuation">(</span>a<span class="token punctuation">)</span><span class="token punctuation">,</span> <span class="token number">100</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token punctuation">&#125;</span><span class="token punctuation">,</span>
<span class="token punctuation">&#125;</span><span class="token punctuation">;</span>

a<span class="token punctuation">.</span><span class="token function">func2</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span><span class="token comment">//Cherry</span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></span></code></pre></div>
<p style='color:#035766;background:#feb856;padding:10px;font-weight:bolder;border-radius:15px;line-height:30px;'>【看上面的用法很相似，而且都可以达到改变 this 指向的目的，那么这三个函数有什么不同呢？】</p>

<ul>
<li><p><code>call</code></p>
<p><code>call()</code> 方法使用一个指定的<code>this </code>值和单独给出的一个或多个参数来调用一个函数。(多个参数用逗号<code>&quot;,&quot;</code>隔开)</p>
<p>现在有一个<code>codeHope</code>对象</p>
<div class="code-wrapper"><pre class="line-numbers language-js" data-language="js"><code class="language-js"><span class="token keyword">const</span> codeHope <span class="token operator">=</span> <span class="token punctuation">&#123;</span>
  nickname<span class="token operator">:</span><span class="token string">"codeHope"</span><span class="token punctuation">,</span>
  age<span class="token operator">:</span><span class="token number">23</span><span class="token punctuation">,</span>
  <span class="token function">introduce</span><span class="token punctuation">(</span><span class="token parameter">hobby<span class="token punctuation">,</span>job</span><span class="token punctuation">)</span><span class="token punctuation">&#123;</span>
    console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>
      <span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string">my name is </span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">$&#123;</span><span class="token keyword">this</span><span class="token punctuation">.</span>nickname<span class="token interpolation-punctuation punctuation">&#125;</span></span><span class="token string">, i'm </span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">$&#123;</span><span class="token keyword">this</span><span class="token punctuation">.</span>age<span class="token interpolation-punctuation punctuation">&#125;</span></span><span class="token string"> years old. my hobby is </span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">$&#123;</span>hobby<span class="token interpolation-punctuation punctuation">&#125;</span></span><span class="token string">,my job is </span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">$&#123;</span>job<span class="token interpolation-punctuation punctuation">&#125;</span></span><span class="token template-punctuation string">`</span></span>
      <span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token punctuation">&#125;</span>
<span class="token punctuation">&#125;</span>

codeHope<span class="token punctuation">.</span><span class="token function">introduce</span><span class="token punctuation">(</span><span class="token string">"play guitar"</span><span class="token punctuation">,</span><span class="token string">"coder"</span><span class="token punctuation">)</span>
<span class="token comment">//my name is codeHope, i'm 23 years old. my hobby is play guitar,my job is coder</span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></span></code></pre></div>
<p>然后一个<code>Marry</code>来了</p>
<div class="code-wrapper"><pre class="line-numbers language-js" data-language="js"><code class="language-js"><span class="token keyword">const</span> Marry <span class="token operator">=</span> <span class="token punctuation">&#123;</span>
  nickname<span class="token operator">:</span><span class="token string">"Marry"</span><span class="token punctuation">,</span>
  age<span class="token operator">:</span><span class="token number">20</span><span class="token punctuation">,</span>
<span class="token punctuation">&#125;</span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span></span></code></pre></div>
<p>她没有<code>codeHope</code>里面的方法，于是想借用一下，来介绍自己！</p>
<div class="code-wrapper"><pre class="line-numbers language-js" data-language="js"><code class="language-js">codeHope<span class="token punctuation">.</span><span class="token function">introduce</span><span class="token punctuation">.</span><span class="token function">call</span><span class="token punctuation">(</span>Marry<span class="token punctuation">,</span><span class="token string">"swimming"</span><span class="token punctuation">,</span><span class="token string">"Animal Helper"</span><span class="token punctuation">)</span>
<span class="token comment">//my name is Marry, i'm 20 years old. my hobby is swimming,my job is Animal Helper</span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span></span></code></pre></div>
<p>这就通过<code>call()</code>来改变了<code>codeHope</code>里面方法的<code>this</code>,而且还可以做到传参。</p>
<ul>
<li><p><code>apply</code></p>
<blockquote>
<p>其实 apply 和 call 基本类似，他们的区别只是传入的参数不同。apply 接收的是一个包含多个参数的数组。</p>
</blockquote>
<div class="code-wrapper"><pre class="line-numbers language-js" data-language="js"><code class="language-js">codeHope<span class="token punctuation">.</span><span class="token function">introduce</span><span class="token punctuation">.</span><span class="token function">apply</span><span class="token punctuation">(</span>Marry<span class="token punctuation">,</span><span class="token punctuation">[</span><span class="token string">"swimming"</span><span class="token punctuation">,</span><span class="token string">"Animal Helper"</span><span class="token punctuation">]</span><span class="token punctuation">)</span>
<span class="token comment">//my name is Marry, i'm 20 years old. my hobby is swimming,my job is Animal Helper</span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span></span></code></pre></div></li>
<li><p><code>bind</code></p>
<blockquote>
<p><code>bind()</code>方法创建一个新的函数,并不会帮我调用，它只是帮我们返回了一个更换了<code>this</code>指向的函数，我们还要自己去调用，传参的</p>
</blockquote>
<div class="code-wrapper"><pre class="line-numbers language-js" data-language="js"><code class="language-js"><span class="token keyword">const</span> merryIntroduce <span class="token operator">=</span> codeHope<span class="token punctuation">.</span><span class="token function">introduce</span><span class="token punctuation">.</span><span class="token function">bind</span><span class="token punctuation">(</span>Marry<span class="token punctuation">)</span><span class="token punctuation">;</span>

<span class="token function">merryIntroduce</span><span class="token punctuation">(</span><span class="token string">"swimming"</span><span class="token punctuation">,</span><span class="token string">"Animal Helper"</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token comment">//my name is Marry, i'm 20 years old. my hobby is swimming,my job is Animal Helper </span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span></span></code></pre></div>
<h2 id="回首掏之总结一下apply，call-bind"><a href="#回首掏之总结一下apply，call-bind" class="headerlink" title="回首掏之总结一下apply，call,bind"></a>回首掏之总结一下<code>apply，call,bind</code></h2></li>
</ul>
</li>
</ul>
</li>
</ul>
<p><span style='border-radius:50%;width:30px;height:30px;background-color:#FF6C00;color:#2A3950;display:inline-block;text-align:center;font-weight:bolder;line-height:30px;'>1</span> <code>call</code> 和 <code>apply</code> 的共同点</p>
 <p style='color:#eaf1f8;background:#443da6;padding:10px;font-weight:bolder;border-radius:15px;line-height:30px;'>【call 和 apply 它们的共同点是，都能够改变函数执行时的上下文，将一个对象的方法交给另一个对象来执行，并且是立即执行的。】</p>

<p>为何要改变执行上下文？举一个生活中的小例子：</p>
<p style='color:#815abd;background:#fcdc01;padding:10px;font-weight:bolder;border-radius:15px;line-height:30px;'>平时没时间做饭的我，周末想给自己炖个砂锅麻辣烫尝尝。但是家里没有砂锅，而我又不想出去买。所以就问邻居借了一个砂锅来用，这样既达到了目的，又节省了开支，一举两得。<br>
【改变执行上下文也是一样的，A 对象有一个方法，而 B 对象因为某种原因，也需要用到同样的方法，那么这时候我们是单独为 B 对象扩展一个方法呢，还是借用一下 A 对象的方法呢？当然是借用 A 对象的啦，既完成了需求，又减少了内存的占用。】</p>


<p><span style='border-radius:50%;width:30px;height:30px;background-color:#C30F2A;color:#F7FBF8;display:inline-block;text-align:center;font-weight:bolder;line-height:30px;'>2 </span> <code>call </code>和<code>apply</code>的区别</p>
<p>它们的区别，主要体现在参数的写法上。先来看一下它们各自的具体写法。</p>
<ul>
<li><p><code>call</code></p>
<ul>
<li>调用 call 的对象，必须是个函数 Function。</li>
<li>call 的第一个参数，是一个对象。 Function 的调用者，将会指向这个对象。如果不传，则默认为全局对象 window。</li>
<li>第二个参数开始，可以接收任意个参数。每个参数会映射到相应位置的 Function 的参数上</li>
</ul>
<div class="code-wrapper"><pre class="line-numbers language-js" data-language="js"><code class="language-js"><span class="token function">Function</span><span class="token punctuation">.</span><span class="token function">call</span><span class="token punctuation">(</span>obj<span class="token punctuation">,</span>params1<span class="token punctuation">,</span>params2<span class="token punctuation">,</span><span class="token operator">...</span><span class="token punctuation">,</span>paramsN<span class="token punctuation">)</span><span aria-hidden="true" class="line-numbers-rows"><span></span></span></code></pre></div></li>
<li><p><code>apply</code></p>
<ul>
<li>它的调用者必须是函数 Function，并且只接收两个参数，第一个参数的规则与 call 一致。</li>
<li>第二个参数，必须是数组或者类数组，它们会被转换成类数组，传入 Function 中，并且会被映射到 Function 对应的参数上。这也是 call 和 apply 之间，很重要的一个区别。</li>
</ul>
<div class="code-wrapper"><pre class="line-numbers language-js" data-language="js"><code class="language-js"><span class="token function">Function</span><span class="token punctuation">.</span><span class="token function">apply</span><span class="token punctuation">(</span>obj<span class="token punctuation">,</span><span class="token punctuation">[</span>params1<span class="token punctuation">,</span>params2<span class="token punctuation">,</span><span class="token operator">...</span><span class="token punctuation">,</span>paramsN<span class="token punctuation">]</span><span class="token punctuation">)</span><span aria-hidden="true" class="line-numbers-rows"><span></span></span></code></pre></div>
<p><span style='border-radius:50%;width:30px;height:30px;background-color:#E1D20F;color:#0867EF;display:inline-block;text-align:center;font-weight:bolder;line-height:30px;'>3</span>  <code>bind</code></p>
</li>
</ul>
<blockquote>
<p>最后来说说 bind。在 MDN 上的解释是：bind() 方法创建一个新的函数，在调用时设置 this 关键字为提供的值。并在调用新函数时，将给定参数列表作为原函数的参数序列的前若干项。</p>
</blockquote>
<p style='color:#035766;background:#feb856;padding:10px;font-weight:bolder;border-radius:15px;line-height:30px;'>【bind 方法 与 apply 和 call 比较类似，也能改变函数体内的 this 指向。不同的是，bind 方法的返回值是函数，并且需要稍后调用，才会执行。而 apply 和 call 则是立即调用。】</p>

<div class="code-wrapper"><pre class="line-numbers language-js" data-language="js"><code class="language-js"><span class="token comment">//定义一个累数组</span>
<span class="token keyword">const</span> obj <span class="token operator">=</span> <span class="token punctuation">&#123;</span>
    <span class="token number">1</span><span class="token operator">:</span><span class="token number">1</span><span class="token punctuation">,</span>
    <span class="token number">2</span><span class="token operator">:</span><span class="token number">2</span><span class="token punctuation">,</span>
    <span class="token number">3</span><span class="token operator">:</span><span class="token number">3</span><span class="token punctuation">,</span>
    length<span class="token operator">:</span><span class="token number">4</span>
<span class="token punctuation">&#125;</span>

<span class="token keyword">const</span> t <span class="token operator">=</span> <span class="token class-name">Array</span><span class="token punctuation">.</span>prototype<span class="token punctuation">.</span><span class="token function">filter</span><span class="token punctuation">.</span><span class="token function">bind</span><span class="token punctuation">(</span>obj<span class="token punctuation">)</span><span class="token punctuation">;</span>

console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token keyword">typeof</span> t<span class="token punctuation">)</span><span class="token punctuation">;</span><span class="token comment">//function</span>

<span class="token keyword">const</span> newObj <span class="token operator">=</span> <span class="token function">t</span><span class="token punctuation">(</span><span class="token parameter">item</span><span class="token operator">=></span><span class="token punctuation">&#123;</span>
    <span class="token keyword">return</span> item <span class="token operator">==</span><span class="token number">3</span><span class="token punctuation">;</span>
<span class="token punctuation">&#125;</span><span class="token punctuation">)</span>

console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>newObj<span class="token punctuation">)</span><span class="token punctuation">;</span><span class="token comment">//[ 3 ]</span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></span></code></pre></div>
<p style='color:#815abd;background:#fcdc01;padding:10px;font-weight:bolder;border-radius:15px;line-height:30px;'>【如果 bind,apply,call 的第一个参数是 null 或者 undefined，this 就指向全局对象 window】</p>

<p style='color:#f77a72;background:#313131;padding:10px;font-weight:bolder;border-radius:15px;line-height:30px;'>【注意，在浏览器环境下，只有通过var定义的变量才会被挂载到window对象中】</p>

<div class="code-wrapper"><pre class="line-numbers language-js" data-language="js"><code class="language-js"><span class="token keyword">var</span> nickname1 <span class="token operator">=</span> <span class="token string">"windowsName1"</span>
<span class="token keyword">const</span> nickname2 <span class="token operator">=</span> <span class="token string">"windowsName2"</span>
<span class="token keyword">let</span> nickname3 <span class="token operator">=</span> <span class="token string">"windowsName3"</span>
<span class="token keyword">const</span> obj <span class="token operator">=</span> <span class="token punctuation">&#123;</span>
    nickname1<span class="token operator">:</span><span class="token string">"codeHope1"</span><span class="token punctuation">,</span>
    nickname2<span class="token operator">:</span><span class="token string">"codeHope2"</span><span class="token punctuation">,</span>
    nickname3<span class="token operator">:</span><span class="token string">"codeHope3"</span><span class="token punctuation">,</span>
    <span class="token function">logName</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">&#123;</span>
        console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
        console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">.</span>nickname1<span class="token punctuation">)</span><span class="token punctuation">;</span>
        console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">.</span>nickname2<span class="token punctuation">)</span><span class="token punctuation">;</span>
        console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">.</span>nickname3<span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token punctuation">&#125;</span>
<span class="token punctuation">&#125;</span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></span></code></pre></div>
<div class="code-wrapper"><pre class="line-numbers language-js" data-language="js"><code class="language-js">obj<span class="token punctuation">.</span><span class="token function">logName</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>

<span class="token comment">/*
&#123;nickname1: "codeHope1", nickname2: "codeHope2", nickname3: "codeHope3"..&#125;
codeHope1
codeHope2
codeHope3
*/</span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></span></code></pre></div>
<div class="code-wrapper"><pre class="line-numbers language-js" data-language="js"><code class="language-js">obj<span class="token punctuation">.</span><span class="token function">logName</span><span class="token punctuation">.</span><span class="token function">apply</span><span class="token punctuation">(</span><span class="token keyword">null</span><span class="token punctuation">)</span>
obj<span class="token punctuation">.</span><span class="token function">logName</span><span class="token punctuation">.</span><span class="token function">call</span><span class="token punctuation">(</span><span class="token keyword">null</span><span class="token punctuation">)</span>
obj<span class="token punctuation">.</span><span class="token function">logName</span><span class="token punctuation">.</span><span class="token function">bind</span><span class="token punctuation">(</span><span class="token keyword">null</span><span class="token punctuation">)</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token comment">/*
Window &#123;window: Window, self: Window, document: document, name: "" …&#125;
windowsName1
undefined
undefined

Window &#123;window: Window, self: Window, document: document , name: ""…&#125;
windowsName1
undefined
undefined

Window &#123;window: Window, self: Window, document: document , name: ""…&#125;
windowsName1
undefined
undefined
*/</span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></span></code></pre></div>
<h2 id="apply，call-bind的使用场景实例分析"><a href="#apply，call-bind的使用场景实例分析" class="headerlink" title="apply，call,bind的使用场景实例分析"></a><code>apply，call,bind</code>的使用场景实例分析</h2><ul>
<li><p>使用apply实现继承</p>
<div class="code-wrapper"><pre class="line-numbers language-js" data-language="js"><code class="language-js"><span class="token keyword">function</span> <span class="token function">Father</span><span class="token punctuation">(</span><span class="token parameter">name<span class="token punctuation">,</span>age</span><span class="token punctuation">)</span><span class="token punctuation">&#123;</span>
    <span class="token keyword">this</span><span class="token punctuation">.</span>name <span class="token operator">=</span> name<span class="token punctuation">;</span>
    <span class="token keyword">this</span><span class="token punctuation">.</span>age <span class="token operator">=</span>age<span class="token punctuation">;</span>
<span class="token punctuation">&#125;</span>


<span class="token keyword">function</span> <span class="token function">Son</span><span class="token punctuation">(</span><span class="token parameter">name<span class="token punctuation">,</span>age<span class="token punctuation">,</span>grade</span><span class="token punctuation">)</span><span class="token punctuation">&#123;</span>
    <span class="token function">Father</span><span class="token punctuation">.</span><span class="token function">call</span><span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">,</span>name<span class="token punctuation">,</span>age<span class="token punctuation">)</span>
    <span class="token keyword">this</span><span class="token punctuation">.</span>grade <span class="token operator">=</span> grade<span class="token punctuation">;</span>
<span class="token punctuation">&#125;</span>

<span class="token keyword">const</span> son <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">Son</span><span class="token punctuation">(</span><span class="token string">'codeHope"s'</span><span class="token punctuation">,</span><span class="token number">2</span><span class="token punctuation">,</span><span class="token number">1</span><span class="token punctuation">)</span>

console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>son<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token comment">//Son &#123; name: 'codeHope"s', age: 2, grade: 1 &#125;</span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></span></code></pre></div></li>
<li><p>使用apply实现多重继承</p>
</li>
<li><p>借用方法</p>
<div class="code-wrapper"><pre class="line-numbers language-js" data-language="js"><code class="language-js"><span class="token keyword">let</span> domNodes <span class="token operator">=</span> <span class="token class-name">Array</span><span class="token punctuation">.</span>prototype<span class="token punctuation">.</span><span class="token function">slice</span><span class="token punctuation">.</span><span class="token function">call</span><span class="token punctuation">(</span>document<span class="token punctuation">.</span><span class="token function">getElementsByTagName</span><span class="token punctuation">(</span><span class="token string">"*"</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span><span aria-hidden="true" class="line-numbers-rows"><span></span></span></code></pre></div>
<p>这样，domNodes 就可以应用 Array 下的所有方法了。</p>
</li>
<li><p><code>Math.max|.min</code>。用它来获取数组中 最大|最小 的一项。</p>
<div class="code-wrapper"><pre class="line-numbers language-js" data-language="js"><code class="language-js"><span class="token keyword">let</span> max <span class="token operator">=</span> Math<span class="token punctuation">.</span><span class="token function">max</span><span class="token punctuation">.</span><span class="token function">apply</span><span class="token punctuation">(</span><span class="token keyword">null</span><span class="token punctuation">,</span> array<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token keyword">let</span> min <span class="token operator">=</span> Math<span class="token punctuation">.</span><span class="token function">min</span><span class="token punctuation">.</span><span class="token function">apply</span><span class="token punctuation">(</span><span class="token keyword">null</span><span class="token punctuation">,</span> array<span class="token punctuation">)</span><span class="token punctuation">;</span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span></span></code></pre></div></li>
<li><p>实现两个数组合并</p>
<div class="code-wrapper"><pre class="line-numbers language-js" data-language="js"><code class="language-js"><span class="token keyword">let</span> arr1 <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token number">1</span><span class="token punctuation">,</span> <span class="token number">2</span><span class="token punctuation">,</span> <span class="token number">3</span><span class="token punctuation">]</span><span class="token punctuation">;</span>
<span class="token keyword">let</span> arr2 <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token number">4</span><span class="token punctuation">,</span> <span class="token number">5</span><span class="token punctuation">,</span> <span class="token number">6</span><span class="token punctuation">]</span><span class="token punctuation">;</span>

<span class="token class-name">Array</span><span class="token punctuation">.</span>prototype<span class="token punctuation">.</span><span class="token function">push</span><span class="token punctuation">.</span><span class="token function">apply</span><span class="token punctuation">(</span>arr1<span class="token punctuation">,</span> arr2<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token comment">//arr2相当于是数组参数！</span>

console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>arr1<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// [1, 2, 3, 4, 5, 6]</span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span><span></span><span></span></span></code></pre></div>




</li>
</ul>
<p>  最后，分享一个在知乎上看到的，关于 call 和 apply 的便捷记忆法：</p>
<blockquote>
<p>猫吃鱼，狗吃肉，奥特曼打小怪兽。</p>
<p>有天狗想吃鱼了</p>
<p>猫.吃鱼.call(狗，鱼)</p>
<p>狗就吃到鱼了</p>
<p>猫成精了，想打怪兽</p>
<p>奥特曼.打小怪兽.call(猫，小怪兽)</p>
<p>猫也可以打小怪兽了</p>
</blockquote>

            </div>
            <hr>
            <div>
              <div class="post-metas mb-3">
                
                  <div class="post-meta mr-3">
                    <i class="iconfont icon-category"></i>
                    
                      <a class="hover-with-bg" href="/categories/%E5%89%8D%E7%AB%AF/">前端</a>
                    
                  </div>
                
                
                  <div class="post-meta">
                    <i class="iconfont icon-tags"></i>
                    
                      <a class="hover-with-bg" href="/tags/JavaScript%E5%9F%BA%E6%9C%AC%E5%8A%9F/">JavaScript基本功</a>
                    
                  </div>
                
              </div>
              
                <p class="note note-warning">本博客所有文章除特别声明外，均采用 <a target="_blank" href="https://creativecommons.org/licenses/by-sa/4.0/deed.zh" rel="nofollow noopener noopener">CC BY-SA 4.0 协议</a> ，转载请注明出处！</p>
              
              
                <div class="post-prevnext">
                  <article class="post-prev col-6">
                    
                    
                      <a href="/posts/60321/">
                        <i class="iconfont icon-arrowleft"></i>
                        <span class="hidden-mobile">回首掏之JavaScript中的宏任务和微任务</span>
                        <span class="visible-mobile">上一篇</span>
                      </a>
                    
                  </article>
                  <article class="post-next col-6">
                    
                    
                      <a href="/posts/2233/">
                        <span class="hidden-mobile">JavaScript中的原型链</span>
                        <span class="visible-mobile">下一篇</span>
                        <i class="iconfont icon-arrowright"></i>
                      </a>
                    
                  </article>
                </div>
              
            </div>

            
              <!-- Comments -->
              <article class="comments" id="comments">
                
                
  <div id="vcomments"></div>
  <script type="text/javascript">
    Fluid.utils.waitElementVisible('vcomments', function() {
      Fluid.utils.createScript('https://cdn.jsdelivr.net/npm/valine@1.4.14/dist/Valine.min.js', function () {
        new Valine({
          el: "#vcomments",
          app_id: "Mi65hxq7VAFUDwOLeIGAOgiV-gzGzoHsz",
          app_key: "hMuhiD4FRqhns4giqLiEH9HG",
          placeholder: "说点什么",
          path: window.location.pathname,
          avatar: "retro",
          meta: ["nick","mail","link"],
          pageSize: "10",
          lang: "zh-CN",
          highlight: false,
          recordIP: false,
          serverURLs: "",
        });
      });
    });
  </script>
  <noscript>Please enable JavaScript to view the
    <a target="_blank" href="https://valine.js.org" rel="nofollow noopener noopener">comments powered by Valine.</a>
  </noscript>


              </article>
            
          </article>
        </div>
      </div>
    </div>
    
      <div class="d-none d-lg-block col-lg-2 toc-container" id="toc-ctn">
        <div id="toc">
  <p class="toc-header"><i class="iconfont icon-list"></i>&nbsp;目录</p>
  <div class="toc-body" id="toc-body"></div>
</div>

      </div>
    
  </div>
</div>

<!-- Custom -->


    

    
      <a id="scroll-top-button" href="#" role="button">
        <i class="iconfont icon-arrowup" aria-hidden="true"></i>
      </a>
    

    
      <div class="modal fade" id="modalSearch" tabindex="-1" role="dialog" aria-labelledby="ModalLabel"
     aria-hidden="true">
  <div class="modal-dialog modal-dialog-scrollable modal-lg" role="document">
    <div class="modal-content">
      <div class="modal-header text-center">
        <h4 class="modal-title w-100 font-weight-bold">搜索</h4>
        <button type="button" id="local-search-close" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body mx-3">
        <div class="md-form mb-5">
          <input type="text" id="local-search-input" class="form-control validate">
          <label data-error="x" data-success="v"
                 for="local-search-input">关键词</label>
        </div>
        <div class="list-group" id="local-search-result"></div>
      </div>
    </div>
  </div>
</div>
    

    
  </main>

  <footer class="text-center mt-5 py-3">
  <div class="footer-content">
    

  </div>
  
  <div class="statistics">
    
    

    
      
        <!-- 不蒜子统计PV -->
        <span id="busuanzi_container_site_pv" style="display: none">
            总访问量 
            <span id="busuanzi_value_site_pv"></span>
             次
          </span>
      
      
        <!-- 不蒜子统计UV -->
        <span id="busuanzi_container_site_uv" style="display: none">
            总访客数 
            <span id="busuanzi_value_site_uv"></span>
             人
          </span>
      
    
  </div>


  
  <!-- 备案信息 -->
  <div class="beian">
    <span>
      <a href="http://beian.miit.gov.cn/" target="_blank" rel="nofollow noopener">
        豫ICP备20009912号-1
      </a>
    </span>
    
  </div>


  
</footer>

<!-- SCRIPTS -->

  <script  src="https://cdn.jsdelivr.net/npm/nprogress@0.2.0/nprogress.min.js" ></script>
  <link  rel="stylesheet" href="https://cdn.jsdelivr.net/npm/nprogress@0.2.0/nprogress.min.css" />

  <script>
    NProgress.configure({"showSpinner":true,"trickleSpeed":100})
    NProgress.start()
    window.addEventListener('load', function() {
      NProgress.done();
    })
  </script>


<script  src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.min.js" ></script>
<script  src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/js/bootstrap.min.js" ></script>
<script  src="/js/debouncer.js" ></script>
<script  src="/js/events.js" ></script>
<script  src="/js/plugins.js" ></script>

<!-- Plugins -->


  
    
      <script  src="/js/lazyload.js" ></script>
    
  



  
    
  



  <script  src="https://cdn.jsdelivr.net/npm/tocbot@4.12.0/dist/tocbot.min.js" ></script>



  <script  src="https://cdn.jsdelivr.net/npm/@fancyapps/fancybox@3.5.7/dist/jquery.fancybox.min.js" ></script>



  <script  src="https://cdn.jsdelivr.net/npm/anchor-js@4.3.0/anchor.min.js" ></script>



  <script defer src="https://cdn.jsdelivr.net/npm/clipboard@2.0.6/dist/clipboard.min.js" ></script>



  <script defer src="https://busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js" ></script>




  <script  src="https://cdn.jsdelivr.net/npm/typed.js@2.0.11/lib/typed.min.js" ></script>
  <script>
    (function (window, document) {
      var typing = Fluid.plugins.typing;
      var title = document.getElementById('subtitle').title;
      
      typing(title)
      
    })(window, document);
  </script>



  <script  src="/js/local-search.js" ></script>
  <script>
    (function () {
      var path = "http://qiniuyun.quancundexiwang.wang/xmlSearch.xml";
      var inputArea = document.querySelector("#local-search-input");
      inputArea.onclick = function () {
        searchFunc(path, 'local-search-input', 'local-search-result');
        this.onclick = null
      }
    })()
  </script>















<!-- 主题的启动项 保持在最底部 -->
<script  src="/js/boot.js" ></script>



</body>
</html>
